<template>
    <div class="top">
        <div class="top-left">
            <el-icon>
                <Tickets />
            </el-icon>
            <p>数据列表</p>
        </div>

        <div>
            <el-button @click="onAddUser">添加</el-button>
        </div>

    </div>
    <div class="botttom">
        <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" :border="true"
            @selection-change="handleSelectionChange">
            <el-table-column  :value="ishow" align="center" type="selection" width="55" />
            <el-table-column align="center" prop="id" label="编号" width="120" />
            <el-table-column align="center" prop="name" label="原因类型" width="200" />
            <el-table-column align="center" prop="sort" label="排序" width="200" />
            <el-table-column label="是否启用" width="100">
                <template #default="scope">
                    <el-switch @change="statuszhuangtai(scope.row)" v-model="scope.row.status" :active-value="1"
                        :inactive-value="0" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="date" label="申请时间" width="200">
                <template #default="scope">
                    <div>
                        {{ scope.row.createTime ? dayjs(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '/' }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" flex="right">
                <template #default="scope">
                    <el-button @click="del(scope.row)">删除</el-button>
                    <el-button @click="onEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 20px" class="bottom-b">
            <div>
                <el-select v-model="value2" class="m-2" placeholder="批量操作" size="large">
                    <el-option value="删除"></el-option>
                </el-select>
                <el-button type="primary" class="button" @click="queding">确定</el-button>
            </div>

            <!-- 分页器 -->
            <div>
                <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
                    :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>

            <Rexit :visible="visible" :form="modalForm" @cancel="onCloseDialog" @confirm="onConfirmDialog"></Rexit>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Tickets } from '@element-plus/icons-vue'
import { reactive, ref, Ref } from 'vue'
import * as api from '../../request/api'

import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import Rexit from './Rexit.vue'
import type { returnReasonlist } from "../../request/QmsAdminConreiller/index";
import useTable from "../../hooks/useTables";

let ishow = ref(false);
interface User {
    date: string;
    name: string;
    address: string;
}
const multipleSelection = ref<User[]>([]);
let value2 = ref("");
// 新增
let add = false; // false编辑 true 新增
// 模态框
let modalForm = reactive({}) as returnReasonlist;
let {
    tableData,
    getTableData,
    pagination,
    handleSizeChange,
    handleCurrentChange,
} = useTable(api.admin.returnReason);


// 编辑
let onEdit = (row: returnReasonlist) => {
    console.log(row);
    add = false;
    modalForm = row;
    visible.value = true;
};
//删除
let del = (row: returnReasonlist) => {
    ElMessageBox.confirm("你确定删除吗?", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })

        .then(async () => {
            await api.admin.DeleteReason(row);

            ElMessage({
                type: "success",
                message: "删除成功",
            });
            // 确认提交后重新渲染数据
            getTableData();
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};

// 添加用户
let onAddUser = () => {
    let newUser = {
        name: "",
        sort: 0,
        status: 0,
    } as returnReasonlist;
    modalForm = newUser;
    add = true;
    visible.value = true;
};
//模态框
let visible = ref(false);
let onCloseDialog = () => {
    visible.value = false;
};
// 确认了输入框的内容之后
// 需要发送请求
let onConfirmDialog = (row: returnReasonlist) => {
    console.log(row); // row就是表单数据
    // 二次 确认
    ElMessageBox.confirm("是否确认提交!", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })
        .then(async () => {
            // 发请求
            // 去判断 是 编辑 还是添加

            row.status = +row.status;

            if (add) {
                await api.admin.getreturnReasonlistadd(row); // 新增
            } else {
                await api.admin.getreturnReasonlistUpdate(row); // 编辑
            }
            visible.value = false;
            ElMessage({
                type: "success",
                message: "操作成功",
            });
            // 确认提交后重新渲染数据
            getTableData();
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消提交",
            });
            visible.value = false;
        });
};

const handleSelectionChange = (val: User[]) => {
    multipleSelection.value = val;
};
//批量删除
let queding = () => {
    if (multipleSelection.value.length === 0) {
        ElMessage({
            message: "Warning, this is a warning message.",
            type: "warning",
        });
        return;
    }
    ElMessageBox.confirm("你确定删除吗?", "提示", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })
        .then(async () => {
            ElMessage({
                type: "success",
                message: "删除成功",
            });
            // 确认提交后重新渲染数据
            getTableData();
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
};

// 编辑 修改状态
let statuszhuangtai = async (row: returnReasonlist) => {
    if (row.status === 0) {
        // row.status = 1;
        await api.admin.getreturnReasonlistUpdatestatus(row);
        ElMessage({
            message: "状态修改完成",
            type: "success",
        });
    } else {
        // row.status = 0;
        await api.admin.getreturnReasonlistUpdatestatus(row);
        ElMessage({
            message: "状态修改完成",
            type: "success",
        });
    }
};
getTableData();
</script>

<style scoped lang="scss">
.top {
    width: 100%vh;
    height: 50px;
    border: 1px solid rgb(218, 216, 216);
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px;
    box-sizing: border-box;

    .top-left {
        display: flex;
    }
}

.botttom {
    width: 100%;
    // border: 1px solid rgb(218, 216, 216);
    margin-top: 20px;
}

.bottom-b {
    display: flex;
    justify-content: space-between;
}
</style>